import Head from 'next/head'
import Image from 'next/image'
import { InferGetStaticPropsType } from 'next'

import { postDetail } from '../api/post'

import { markdown as md } from '../util'

export default function Home({
  data
}: InferGetStaticPropsType<typeof getServerSideProps>) {
  const res = md.render(data?.data.article_info.mark_content)

  return (
    <>
      <Head>
        <title>My Todo</title>
        <meta name='description' content='构建一个 SSR Todos' />
        <link rel='icon' href='/favicon.ico' />
      </Head>

      <main>
        <h1>
          Welcome to <a href='https://nextjs.org'>Next.js!</a>
        </h1>
        <div className='prose prose-indigo'>
          {true && <div dangerouslySetInnerHTML={{ __html: res }}></div>}
        </div>
      </main>
    </>
  )
}

/**
 * （静态生成）：指定基于数据预呈现页面的动态路由。
 */
// export async function getStaticPaths():GetStaticPaths {
//   const list = await (await fetch('http://localhost:5000/list')).json()

//   return {
//     props: {
//       list
//     }
//   }
// }

/**
 * （静态生成）：在构建时获取数据。
 */
// export async function getStaticProps() {
//   // 调用外部 API 获取博文列表
//   const list: any[] = await (await fetch('http://localhost:5000/list')).json()

//   // 通过返回 { props: { posts } } 对象，Blog 组件
//   // 在构建时将接收到 `posts` 参数
//   return {
//     props: {
//       list
//     }
//   }
// }

/**
 * （Server-side Rendering）：获取每个请求的数据。
 */
export async function getServerSideProps() {
  // Fetch data from external API
  // const res = await fetch(`http://localhost:5000/list`)
  // const list: any[] = await res.json()
  const data = await postDetail()
  // const data = await postDetail('7080803763216187423')
  // const data = await postDetail('7088920558598881293')

  // Pass data to the page via props
  return { props: { data } }
}
